<template>
    <div>
        <h3> 渲染数据{{ mainStore.$state.count }} , {{ mainStore.count }}</h3>
        <p>
            <button @click="mainStore.add(10)">count++</button>
        </p>
        <h3>{{ bookStore.price }}</h3>
        <p>
            <button @click="bookStore.add">Price++</button>
        </p>
    </div>
</template>

<script setup>
/**
 *  pinia的使用步骤：
 *      1. createPinia()
 *      2. app.use()
 *      3.  export const useXXX = definedStore
 *      4. 在组件里面， 使用useXXX 获取对应模块的仓库
 *      5. store.数据
 *      6. 修改数据
 *          6.1 在actions 里面定义方法，直接操作 state的数据
 *          6.2 在组件里面 store.方法 调用
 */
import { useMain } from '../store/main'
import { useBook } from '../store/book'
const mainStore = useMain();
const bookStore = useBook();
</script>

<style scoped>

</style>